<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-14 22:13:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 15:13:58
-->
<template>
  <div>
    <el-row>
      <el-col :span="6" style="padding-right:.5em;border-right:2px solid #f4f4f4">
        <el-tree :data="eds" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="18">
        <div v-if="params.device_id">
           <div class="block">
         <span class="demonstration"></span>
         <el-date-picker size="small"
         v-model="params.data"
         type="daterange"
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="small" icon="el-icon-search">搜索</el-button>
        </div>
          <el-table :data="monitorData" size="small">
           <el-table-column prop="d" label="日期" width="90"></el-table-column>
           <el-table-column prop="tsp" label="tsp" width="90"></el-table-column>
           <el-table-column prop="pm10" label="pm10" width="90"></el-table-column>
           <el-table-column prop="pm25" label="pm2.5" width="90"></el-table-column>
           <el-table-column prop="temperature" label="温度" width="80"> </el-table-column>
           <el-table-column prop="humidity" label="湿度" width="80"> </el-table-column>
           <el-table-column prop="noise" label="噪音" width="90"> </el-table-column>
           <el-table-column prop="wind_speed" label="风速" width="90"> </el-table-column>
           <el-table-column prop="wind_direction" label="风向" align="center"> </el-table-column>
          </el-table>
          <el-pagination
            :current-page="+monitorData.page"
            :page-size="+monitorData.pageSize"
            :total="+monitorData.total"
            @current-change="pageChangeHandler"
          ></el-pagination>
        </div>
        <div v-else style="line-height:3em;color:red;text-align:center">请选择设备进行查看</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {get} from '@/utils/request'
export default {
  // 变量
  data(){
    return {
      defaultProps:{
        children: 'children',
        label: 'name'   
      },
      eds:[],
      params:{
        page:1,
        pageSize:10
      },
      monitorData:{list:[]},
      pickerOptions: {
          shortcuts: [{
            }]
        },
           value1: '',
           value2: ''
    }
  },
  // 监听器
  watch:{
    params:{
      handler(){
        this.loadMonitor()
      },
      deep:true
    }
  },
  // 方法
  methods:{
    // 加载数据
    loadMonitor(){
      let url = "/monitor/queryMouthData"
      get(url,this.params).then(resp => {
        this.monitorData = resp.data;
      })
    },
    handleNodeClick(node){
      if(node.engineer_id ){
        // 点击了设备
        this.$set(this.params,'engineer_id',node.engineer_id)
        this.$set(this.params,'device_id',node.id)
      }
    },
    // 加载工程设备树
    loadEngineerDevices(){
      let url = "/engineer/findEngineerDeviceTree"
      get(url).then(resp => {
        this.eds = resp.data;
      })
    },
    pageChangeHandler(page){
      this.params.page = page;
    }
  },
  // 页面加载完毕后执行
  mounted() {
    this.loadEngineerDevices();
  },
}
</script>

